<template>
  <div class="ting">
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <img :src="item.program.radio.intervenePicUrl" alt="" />
        <b>播放量:{{ item.__ob__.value.program.secondCategoryId }}</b>
        <span>{{ item.program.mainSong.name }}</span>
      </li>
    </ul>
  </div>
</template>
<script>
import { reqListenApi } from "../../../api/index";
export default {
  data() {
    return {
      list: [],
    };
  },
  computed: {},
  watch: {},
  methods: {
    async ting() {
      const result = await reqListenApi({ limit: 20 });
      console.log(result.data.toplist);
      this.list = result.data.toplist;
    },
  },
  created() {
    this.ting();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background-color: #ddd;
}
li {
  width: 45%;
  height: 150px;
  margin: 10px 2.5%;
  background-color: #666;
  position: relative;
  overflow: hidden;
}
img {
  width: 100%;
  height: 100%;
}
span {
  position: absolute;
  bottom: 3px;
  left: 2px;
  width: 100%;
  height: 18px;
  color: #ddd;
}
b {
  font-weight: normal;
  position: absolute;
  bottom: 25px;
  left: 2px;
  width: 100%;
  height: 16px;
  font-size: 14px;
}
</style>
